<!DOCTYPE html>
<html>
<head>
    <title>Physics Experiment Setup</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="700"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillStyle = 'black';
        ctx.font = '18px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Helper Functions ---

        function drawMeter(x, y, label) {
            ctx.beginPath();
            ctx.arc(x, y, 20, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.fillText(label, x, y);
        }

        function drawIceParticle(x, y) {
            const radiusX = Math.random() * 7 + 4;
            const radiusY = Math.random() * 5 + 3;
            const rotation = Math.random() * Math.PI;
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(rotation);
            ctx.beginPath();
            ctx.ellipse(0, 0, radiusX, radiusY, 0, 0, 2 * Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();
            ctx.stroke();
            ctx.restore();
        }

        function drawWaterDrop(x, y) {
            const h = 12;
            const w = 5;
            ctx.beginPath();
            ctx.moveTo(x, y - h / 2);
            ctx.bezierCurveTo(x - w, y, x - w, y, x, y + h / 2);
            ctx.bezierCurveTo(x + w, y, x + w, y, x, y - h / 2);
            ctx.fillStyle = 'white';
            ctx.fill();
            ctx.stroke();
        }


        // --- Main Drawing ---

        // 1. Beaker
        const beakerX1 = 200, beakerY1 = 480;
        const beakerX2 = 400, beakerY2 = 600;
        ctx.beginPath();
        ctx.moveTo(beakerX1, beakerY1);
        ctx.lineTo(beakerX1, beakerY2);
        ctx.lineTo(beakerX2, beakerY2);
        ctx.lineTo(beakerX2, beakerY1);
        ctx.stroke();

        // 2. Water in Beaker
        const waterY1 = 570;
        ctx.fillStyle = '#E8E8E8'; // Light gray for water area
        ctx.fillRect(beakerX1 + 1, waterY1, beakerX2 - beakerX1 - 2, beakerY2 - waterY1 - 1);
        
        // Water texture (dashed lines)
        ctx.save();
        ctx.strokeStyle = '#333';
        ctx.lineWidth = 1;
        ctx.beginPath();
        for (let y = waterY1 + 5; y < beakerY2; y += 5) {
            for (let x = beakerX1 + 5; x < beakerX2 - 5; x += 10) {
                ctx.moveTo(x, y);
                ctx.lineTo(x + 5, y);
            }
        }
        ctx.stroke();
        ctx.restore();
        // Outline for the water area
        ctx.strokeRect(beakerX1 + 1, waterY1, beakerX2 - beakerX1 - 2, beakerY2 - waterY1 - 1);


        // 3. Funnel
        const funnelTopY = 150;
        const funnelBottomY = 350;
        const funnelTopLeftX = 150;
        const funnelTopRightX = 450;
        const funnelBottomX = 300;
        const spoutWidth = 10;
        const spoutBottomY = 420;

        ctx.beginPath();
        ctx.moveTo(funnelTopLeftX, funnelTopY);
        ctx.lineTo(funnelBottomX - spoutWidth, funnelBottomY);
        ctx.lineTo(funnelBottomX - spoutWidth, spoutBottomY);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(funnelTopRightX, funnelTopY);
        ctx.lineTo(funnelBottomX + spoutWidth, funnelBottomY);
        ctx.lineTo(funnelBottomX + spoutWidth, spoutBottomY);
        ctx.stroke();

        // 4. Water drops
        drawWaterDrop(300, 440);
        drawWaterDrop(300, 465);

        // 5. Heater
        const heaterX = 280, heaterY = 180;
        const heaterW = 40, heaterH = 120;
        ctx.fillStyle = 'white';
        ctx.fillRect(heaterX, heaterY, heaterW, heaterH);
        ctx.strokeRect(heaterX, heaterY, heaterW, heaterH);
        
        // Heater leads
        const leadYTop = 100;
        ctx.beginPath();
        ctx.moveTo(290, heaterY);
        ctx.lineTo(290, leadYTop);
        ctx.moveTo(310, heaterY);
        ctx.lineTo(310, leadYTop);
        ctx.stroke();

        // 6. Ice Particles
        for (let i = 0; i < 400; i++) {
            const x = Math.random() * (funnelTopRightX - funnelTopLeftX) + funnelTopLeftX;
            const y = Math.random() * (funnelBottomY - funnelTopY) + funnelTopY;

            // Check if inside the funnel's V-shape
            const funnelWidthAtY = (funnelTopRightX - funnelTopLeftX) * (1 - (y - funnelTopY) / (funnelBottomY - funnelTopY));
            const funnelLeftXAtY = funnelBottomX - funnelWidthAtY / 2;
            const funnelRightXAtY = funnelBottomX + funnelWidthAtY / 2;

            if (x > funnelLeftXAtY && x < funnelRightXAtY) {
                // Check if outside the heater
                if (!(x > heaterX && x < heaterX + heaterW && y > heaterY && y < heaterY + heaterH)) {
                    drawIceParticle(x, y);
                }
            }
        }
        
        // 7. Circuit
        const circuitY = 50;
        const vMeterX = 300, vMeterY = 80;
        const aMeterX = 400, aMeterY = circuitY;
        const switchX = 400, switchY = 120;
        const powerX = 520, powerY1 = circuitY, powerY2 = 120;

        // Voltmeter
        drawMeter(vMeterX, vMeterY, 'V');
        ctx.beginPath();
        ctx.moveTo(290, leadYTop);
        ctx.lineTo(290, vMeterY);
        ctx.lineTo(vMeterX - 20, vMeterY);
        ctx.moveTo(310, leadYTop);
        ctx.lineTo(310, vMeterY);
        ctx.lineTo(vMeterX + 20, vMeterY);
        ctx.stroke();

        // Ammeter and top wire
        drawMeter(aMeterX, aMeterY, 'A');
        ctx.beginPath();
        ctx.moveTo(290, leadYTop);
        ctx.lineTo(290, circuitY);
        ctx.lineTo(aMeterX - 20, circuitY);
        ctx.moveTo(aMeterX + 20, circuitY);
        ctx.lineTo(powerX, circuitY);
        ctx.stroke();

        // Switch and bottom wire
        ctx.beginPath();
        ctx.moveTo(310, leadYTop);
        ctx.lineTo(310, switchY);
        ctx.lineTo(switchX, switchY);
        // Switch itself
        ctx.moveTo(switchX, switchY);
        ctx.lineTo(switchX + 10, switchY);
        ctx.moveTo(switchX + 50, switchY);
        ctx.lineTo(switchX + 60, switchY);
        ctx.moveTo(switchX + 12, switchY);
        ctx.lineTo(switchX + 48, switchY - 15);
        ctx.stroke();
        // Circles for switch contacts
        ctx.beginPath(); ctx.arc(switchX+10, switchY, 3, 0, 2*Math.PI); ctx.fill();
        ctx.beginPath(); ctx.arc(switchX+50, switchY, 3, 0, 2*Math.PI); ctx.fill();
        
        // Wire from switch to power
        ctx.moveTo(switchX + 60, switchY);
        ctx.lineTo(powerX, switchY);
        ctx.stroke();

        // Power Source
        ctx.beginPath(); ctx.arc(powerX, powerY1, 5, 0, 2 * Math.PI); ctx.stroke();
        ctx.fillText('+', powerX + 20, powerY1);
        ctx.beginPath(); ctx.arc(powerX, powerY2, 5, 0, 2 * Math.PI); ctx.stroke();
        ctx.fillText('–', powerX + 20, powerY2);
        
        // 8. Labels
        ctx.textAlign = 'left';
        
        // "pure melting ice"
        ctx.fillText('pure melting', 20, 190);
        ctx.fillText('ice', 20, 210);
        ctx.beginPath();
        ctx.moveTo(115, 200);
        ctx.lineTo(190, 210);
        ctx.stroke();

        // "heater"
        ctx.fillText('heater', 480, 250);
        ctx.beginPath();
        ctx.moveTo(475, 250);
        ctx.lineTo(325, 240);
        ctx.stroke();

        // "beaker"
        ctx.fillText('beaker', 120, 520);
        ctx.beginPath();
        ctx.moveTo(175, 520);
        ctx.lineTo(210, 500);
        ctx.stroke();

        // "water"
        ctx.fillText('water', 120, 580);
        ctx.beginPath();
        ctx.moveTo(165, 580);
        ctx.lineTo(240, 580);
        ctx.stroke();

        // "Fig. 3.1"
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 3.1', 300, 650);

    </script>
</body>
</html>